@let activeEnvironment = activeEnvironment$ | async;
@let activeCallback = activeCallback$ | async;
@let activeTab = activeTab$ | async;
@let activeSpecTab = activeSpecTab$ | async;
@let activeCallbackFileMimeType = activeCallbackFileMimeType$ | async;
@let databuckets = databuckets$ | async;
@let activeCallbackUsages = activeCallbackUsages$ | async;
@let bodyEditorConfig = bodyEditorConfig$ | async;
@let hasCallbacks = hasCallbacks$ | async;

<div class="d-flex h-100">
  <app-callbacks-menu class="h-100"></app-callbacks-menu>

  <div class="d-flex flex-column flex-fill mh0">
    @if (activeCallback) {
      <div class="callback-tabs d-flex mt-2 ms-2">
        <ul class="nav nav-tabs flex-fill">
          <li class="nav-item">
            <a
              class="nav-link"
              [ngClass]="{ active: activeTab === 'SPEC' }"
              (click)="setActiveTab('SPEC')"
              >Definition</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link d-flex align-items-center"
              [ngClass]="{ active: activeTab === 'USAGE' }"
              (click)="setActiveTab('USAGE')"
            >
              Usage
              <span class="badge badge-hollow font-weight-bold ms-2">
                {{ activeCallbackUsages?.length }}
              </span>
            </a>
          </li>
        </ul>
      </div>

      @if (activeTab === 'SPEC') {
        <div
          class="d-flex flex-column flex-fill mh0"
          [formGroup]="activeCallbackForm"
        >
          <!-- Name -->
          <div class="input-group pt-2 px-2">
            <input
              type="text"
              class="form-control"
              placeholder="Callback name"
              formControlName="name"
              [appFocusOnEvent]="focusableInputs.CALLBACK_NAME"
            />
          </div>

          <!-- Documentation -->
          <div class="input-group mt-2 px-2">
            <input
              type="text"
              class="form-control"
              placeholder="Add documentation for this callback"
              formControlName="documentation"
            />
          </div>

          <div class="d-flex flex-row py-2 px-2">
            <app-custom-select
              class="col-2"
              formControlName="method"
              [enableCustomInput]="false"
              [items]="callbackMethods"
              dropdownId="cbmethods"
            ></app-custom-select>

            <div class="col-10 ps-2">
              <input
                type="text"
                class="form-control"
                [placeholder]="
                  'Absolute or relative URL (e.g. /path, http://example.com/path). Supports templating (e.g. ' +
                  '{{getGlobalVar ...}})'
                "
                formControlName="uri"
              />
            </div>
          </div>

          <div class="callback-spec-tabs d-flex mt-2 ms-2">
            <ul class="nav nav-tabs flex-fill">
              <li class="nav-item">
                <a
                  class="nav-link"
                  [ngClass]="{ active: activeSpecTab === 'BODY' }"
                  (click)="setActiveSpecTab('BODY')"
                  >Body</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  [ngClass]="{ active: activeSpecTab === 'HEADERS' }"
                  (click)="setActiveSpecTab('HEADERS')"
                  >Headers</a
                >
              </li>
            </ul>
          </div>

          @if (activeSpecTab === 'HEADERS') {
            <!-- Headers -->
            <div
              class="flex-fill scroll-content mt-3 mx-2"
              #responseCallbackHeadersContainer
            >
              <app-headers-list
                id="response-callback-headers"
                [activeDataSubject$]="activeCallback$"
                dataSubject="route"
                headersPropertyName="headers"
                (headersUpdated)="headersUpdated($event)"
                (headerAdded)="scrollToBottom(responseCallbackHeadersContainer)"
              >
              </app-headers-list>
            </div>
          } @else if (activeSpecTab === 'BODY') {
            <!-- Editor -->
            @if (bodySupportingMethods.indexOf(activeCallback?.method) === -1) {
              <div
                class="d-flex flex-fill flex-column h-100 px-2 py-2 notsupporting-callback-body"
              >
                <p class="message mt-4">
                  Request body cannot be defined for this HTTP method
                </p>
              </div>
            } @else {
              <div
                class="d-flex flex-fill flex-column h-100 callback-body-spec"
              >
                <div class="pt-5 pb-4 d-flex justify-content-center">
                  <app-toggle
                    prefix="body-type"
                    formControlName="bodyType"
                    label="Body"
                    [items]="bodyType$ | async"
                    [uncheckable]="false"
                  ></app-toggle>
                </div>

                @if (activeCallback?.bodyType === 'INLINE') {
                  <div class="flex-fill mt-2 mb-3 px-2">
                    <app-editor
                      class="h-100"
                      [options]="bodyEditorConfig?.options"
                      mode="json"
                      [uuid]="activeCallback?.uuid"
                      formControlName="body"
                    >
                    </app-editor>
                  </div>
                }

                @if (activeCallback?.bodyType === 'FILE') {
                  <div class="input-group px-2">
                    <input
                      type="text"
                      class="form-control col-8"
                      formControlName="filePath"
                      placeholder="Relative or absolute path"
                    />
                    @if (activeCallback?.filePath) {
                      <button
                        type="button"
                        (click)="
                          activeCallbackForm.get('filePath').setValue('')
                        "
                        class="btn btn-custom"
                        ngbTooltip="Clear"
                      >
                        <app-svg icon="clear"></app-svg>
                      </button>
                    }
                    <!-- File options dropdown -->
                    <div class="d-flex align-items-center">
                      <app-dropdown-menu
                        idPrefix="file-options"
                        [items]="fileDropdownMenuItems"
                        [payload]="{
                          filePath: activeCallback?.filePath,
                          environmentUuid: activeEnvironment?.uuid
                        }"
                      ></app-dropdown-menu>
                    </div>
                  </div>

                  @if (activeCallback?.filePath) {
                    <div class="d-flex justify-content-between mt-2 px-2">
                      <div class="form-check">
                        <input
                          type="checkbox"
                          class="form-check-input"
                          id="sendFileAsBody"
                          formControlName="sendFileAsBody"
                        />
                        <label class="form-check-label" for="sendFileAsBody"
                          >Send as body</label
                        >
                      </div>
                      <small>
                        Detected MIME type:
                        {{ activeCallbackFileMimeType?.mimeType || 'unknown' }}
                        {{
                          activeCallbackFileMimeType?.supportsTemplating
                            ? ' - Supports templating'
                            : ''
                        }}
                      </small>
                    </div>
                  }
                } @else if (activeCallback?.bodyType === 'DATABUCKET') {
                  <div class="environment-callbacks-databucket px-2">
                    <app-custom-select
                      formControlName="databucketID"
                      [enableCustomInput]="false"
                      [items]="databuckets"
                      dropdownId="databuckets"
                      emptyListMessage="No databucket defined"
                      placeholder="Select a databucket"
                      [clearable]="true"
                      [defaultClearValue]="''"
                    ></app-custom-select>
                  </div>
                }
              </div>
            }
          }
        </div>
      } @else if (activeTab === 'USAGE') {
        <div class="scroll-content">
          @if (activeCallbackUsages?.length === 0) {
            <div class="d-flex flex-column px-2 py-2">
              <p class="message mt-4">No usage found for this callback</p>
            </div>
          }

          @for (activeCallbackUsage of activeCallbackUsages; track $index) {
            <div
              class="d-flex flex-column align-items-start px-3 py-2 callback-usage-item"
            >
              <div class="py-2 badge badge-custom callback-usage-route-item">
                {{ activeCallbackUsage.label }}
              </div>
              @for (
                activeCallbackResponse of activeCallbackUsage.responses;
                track $index
              ) {
                <a
                  class="nav-link text-primary mx-4 py-0 callback-usage-response-item"
                  (click)="
                    navigateToRoute(activeCallbackUsage, activeCallbackResponse)
                  "
                >
                  {{ activeCallbackResponse.label }}
                </a>
              }
            </div>
          }
        </div>
      }
    } @else {
      <p class="message mt-4">
        {{ hasCallbacks ? 'No callback selected' : 'No callbacks defined' }}
      </p>
    }
  </div>
</div>
